<template>
    <div class="message">
        <div style="position: fixed;width: 100%;background: #fff;z-index: 99;">
            <bar text="实时消息"></bar>
        </div>
        <div class="current">
            <p>当前客流总量:<span>{{details.totalflow}}</span> 人   销售总额:<span>{{details.totalsales}}</span>  万元</p>
        </div>
        <!--消息-->
        <div class="news">
            <img class="newsImg" src="../../assets/imgs/home/news.png" alt="">
            <p class="newsContent">{{details.longMSg}}</p>
        </div>
        <!--商场消息-->
        <div class="newsMarket">
            <titles text="商场消息"></titles>
            <div class="marketBox">
                <div class="marketDetail" v-for="(item,index) in newArr" @click="btnMap(item.floor,item.type,item.fid,item.region)">
                    <img v-if="item.type == 0" src="../../assets/imgs/realtimeMessage/expireIcon.png" class="marketDetail-img" alt="">
                    <img v-if="item.type == 1" src="../../assets/imgs/realtimeMessage/flowIcon.png" class="marketDetail-img" alt="">
                    <img v-if="item.type == 2" src="../../assets/imgs/realtimeMessage/saleIcon.png" class="marketDetail-img" alt="">
                    <img v-if="item.type == 4" src="../../assets/imgs/realtimeMessage/currentIcon.png" class="marketDetail-img" alt="">
                    <img v-if="item.type == 3" src="../../assets/imgs/realtimeMessage/staffIcon.png" class="marketDetail-img" alt="">
                    <img v-if="item.type == 5" src="../../assets/imgs/realtimeMessage/cleaningIcon.png" class="marketDetail-img" alt="">
                    <div class="marketDetail-content">
                        <p>{{item.msg}}</p>
                        <p style="margin-top:11px;">{{item.pos}}</p>
                    </div>
                    <p class="marketDetail-time">{{item.time}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import titles from "../../components/titleBar";
import bar from "../../components/topBar";
export default {
    props: {},
    components: {
        titles,
        bar
    },
    name: "realtimeMessage",
    data() {
        return {
            details:[],
            newArr:[]
        };
    },
    computed: {},
    created() {},
    mounted() {
        this.detail()
    },
    methods: {
        btnMap(floor,type,fid,region){
            console.log(floor,type,fid,region,'jjjjj')
            // var route = '1043150101131|1043150101132|1043150101134|1043150101135|1043150101136|1043150101138'
            if(type == 3){
                this.$router.push({path: "/map", query: {type: 5,floor:floor,fid:region,}})
            }else if(type==0 || type ==2){
                this.$router.push({path: "/map", query: {type: 4,fid:fid,}})
            }else if(type == 4){
                this.$router.push({path: "/map", query: {type: 6,fid:region,}})
            }
        },
        detail(){
            this.$api.get('market/home/todaymsg',  {},response => {
                if (response.status >= 200 && response.status < 300) {
                    console.log(response.data.data);
                    this.details = response.data.data
                    this.newArr = response.data.data.shortMsg
                    console.log(newArr,'kkkk')

                } else {
                    console.log(response.message);
                    //请求失败，response为失败信息
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
    .message{
        .current{
            /*text-align: left;*/
            padding-top: 48px;
            width: 100%;
            height: 68px;
            font-size: 10px;
            box-shadow:0px 1px 5px 2px rgba(0,0,0,0.06);
            p{
                color: #666666;
                font-size: 12px;
                text-align: center;
                line-height: 68px;
                span{
                    font-size: 16px;
                }
            }
        }
        /*消息*/
        .news{
            margin: 26px 0 0 20px;
            display: flex;
            align-items: center;
            .newsImg{
                width: 12px;
                height: 13px;
            }
            .newsContent{
                color: #666666;
                font-size: 12px;
                margin-left: 10px;
            }
        }
        /*商场消息*/
        .newsMarket{
            margin: 30px 15px 56px 15px;
            .marketBox{
                margin-top: 15px;
                .marketDetail{
                    width: 345px;
                    height: 76px;
                    background: #fff;
                    box-shadow:0px 1px 6px 0px rgba(228,228,230,0.5);
                    border-radius:5px;
                    margin-bottom: 8px;
                    text-align: left;
                    display: flex;
                    .marketDetail-img{
                        width: 47.5px;
                        height: 44.5px;
                        margin: 15px 15px 0 13px;
                    }
                    .marketDetail-content{
                        flex: 1;
                        margin-top: 17px;
                        p{
                            color: #666666;
                            font-size: 15px;
                        }
                    }
                    .marketDetail-time{
                        color: #999999;
                        font-size: 12px;
                        margin-right: 16px;
                        margin-top: 21px;
                    }
                }
            }
        }
    }
</style>
